<template>
  <div style="display: flex" class="table-left">
    <div :style="{ width: '250px', height: type === 'COST' ? 296 : 260 }">
      <div class="left-top-cell">{{ type === "COST" ? "Utility(不含税费用)" : "Utility" }}</div>
      <div class="flex-center">
        <div class="one-cell" :style="{ height: `${36 * cellList.length}px` }">{{ cellTitle }}</div>
        <div>
          <div v-for="item in cellList" :key="item" class="left-cell">{{ item }}</div>
        </div>
      </div>
    </div>
    <px-table :height="334" :data="data" size="small" border class="common-table">
      <px-table-column v-for="item in columnList" :key="item" :label="item">
        <px-table-column :prop="item" :label="type === 'COST' ? 'RMB' : '用量'" min-width="120" />
      </px-table-column>
    </px-table>
  </div>
</template>

<script setup>
import { onMounted, reactive, toRefs } from "vue";

const props = defineProps({
  year: {
    type: String,
    default: ""
  },
  data: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: "COST"
  },
  columnList: {
    type: Array,
    default: () => []
  },
  cellList: {
    type: Array,
    default: () => []
  },
  cellTitle: {
    type: String,
    default: () => ""
  }
});

// const columnList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Total"];

// const state = reactive({
//   cellList: []
// });
// const { cellList } = toRefs(state);

onMounted(() => {
  // if (props.type === "COST") {
  //   state.cellList = ["水费", "电费", "蒸汽费", "热水", "天然气", "Sub Total(RMB)"];
  // } else {
  //   state.cellList = ["水用量(立方米)", "电用量(kwh)", "蒸汽用量(吨)", "热水用量(吨)", "天然气用量(立方米)"];
  // }
});
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
}

.table-left {
  font-size: 13px;
  font-weight: 400;
  color: rgb(0 0 0 / 80%);
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;

  .left-top-cell {
    height: 80px;
    padding: 0 8px;
    line-height: 80px;
    background: #ebf2fe;
    border: 1px solid #e6e6e6;
    border-right: none;
  }

  .one-cell {
    width: 100px;
    padding: 0 8px;
    // height: 216px;
    line-height: 216px;
    background: #ebf2fe;
    border: 1px solid #e6e6e6;
    border-top: none;
    border-right: none;
  }

  .left-cell {
    width: 150px;
    height: 36px;
    padding: 0 8px;
    line-height: 36px;
    background: #ebf2fe;
    border: 1px solid #e6e6e6;
    border-top: none;
    border-right: none;
  }
}

:deep(.px-table thead.is-group th.px-table__cell) {
  background: #ebf2fe !important;
}
</style>
